import { Component } from "react";
import {
  Swiper,
  SwiperItem,
  View,
  Canvas,
  Image,
  Video
} from "@tarojs/components";
import Taro from "@tarojs/taro";
// import { View, Canvas, Image } from "@tarojs/components";
import lottie from "lottie-miniprogram";
import { isEmpty } from "lodash";
// import { AtTabBar } from "taro-ui";
import "@antmjs/vantui/es/notice-bar/style";
import { NoticeBar, Tab, Tabs } from "@antmjs/vantui";
import Tabbar from "../../components/tabbar/tabbar";
import Topbar from "../../components/topbar/topbar";
import "./index.scss";

interface State {
  picArray: any;
  pageData: any;
}

export default class Index extends Component {
  state: State = {
    picArray: [
      {
        image: "https://image.meiye.art/pic_1628384584302"
      }
      // {
      //   image: "https://image.meiye.art/pic_1628384597621"
      // }
    ],
    pageData: {}
  };

  onReady() {
    this.iconShow();
    this.getCount();
  }

  // onShow() {
  //   this.getCount();
  // }

  pageCopyright = () => {
    const userInfo = Taro.getStorageSync("userInfo");
    if (isEmpty(userInfo)) {
      Taro.navigateTo({
        url: "/components/login/login"
      }).then();
    } else {
      Taro.navigateTo({
        url: "/pages/copyright/copyright"
      }).then();
    }
  };

  pageCopyright_exchange = () => {
    const userInfo = Taro.getStorageSync("userInfo");
    if (isEmpty(userInfo)) {
      Taro.navigateTo({
        url: "/components/login/login"
      }).then();
    } else {
      Taro.navigateTo({
        url: "/pages/result/result"
      }).then();
    }
  };

  getCount = () => {
    Taro.cloud
      .callFunction({
        name: "logins",
        data: {
          $url: "getCount"
        }
      })
      .then((res: any) => {
        console.log(res);
        this.setState({ pageData: res.result });
        Taro.setStorageSync("wxContext", res.result.wxContext);
      });
  };

  iconShow = () => {
    Taro.createSelectorQuery()
      .select("#canvas")
      .node((res: any) => {
        const canvas = res.node;
        const context = canvas.getContext("2d");
        const dpr = Taro.getSystemInfoSync().pixelRatio;
        canvas.width = res.node._width * dpr;
        canvas.height = res.node._height * dpr;
        lottie.setup(canvas);
        lottie.loadAnimation({
          rendererSettings: {
            context
          },
          loop: true,
          autoplay: true,
          animationData: require("./lottie/book.json")
        });
      })
      .exec();
    Taro.createSelectorQuery()
      .select("#canvas-man")
      .node((res: any) => {
        const canvas = res.node;
        const context = canvas.getContext("2d");
        const dpr = Taro.getSystemInfoSync().pixelRatio;
        canvas.width = res.node._width * dpr;
        canvas.height = res.node._height * dpr;
        lottie.setup(canvas);
        lottie.loadAnimation({
          rendererSettings: {
            context
          },
          loop: true,
          autoplay: true,
          animationData: require("./lottie/man.json")
        });
      })
      .exec();
  };

  readonly company: string[] = [
    "重庆萃智邦成专利代理事务所（普通合伙）",
    "重庆儿童天堂摄影有限公司",
    "重庆梵宇文化传媒有限公司",
    "重庆铅元素文化传播有限公司",
    "重庆巨墨文化传播有限公司",
    "重庆华楠文化传媒有限公司",
    "重庆归鸣文化传媒有限公司",
    "重庆麦芽传媒有限公司",
    "重报集团上游文化产业发展有限公司",
    "重庆梵飞文化创意策划中心",
    "重庆优宝数字影视有限公司",
    "重庆兆策广告传媒有限公司",
    "重庆极限光影数字科技有限公司",
    "济南世纪尚业企业管理咨询有限公司",
    "山东向上奔腾文化传媒有限公司",
    "中森碳投（重庆）生态环境咨询服务有限公司",
    "重庆两江新区丽创飞扬瑜伽健身馆",
    "重庆南温泉商业管理有限公司",
    "山东春晓文化传媒有限公司",
    "山东坤天广告传媒有限公司",
    "重庆归初规划设计咨询有限公司",
    "重庆市宏恒装饰工程有限公司",
    "重庆梓银数字科技有限公司",
    "重庆侑咪科技有限公司",
    "重庆小野豹文化传媒有限公司",
    "重庆剪爱工艺品有限责任公司",
    "米凯迪（重庆）食品科技有限公司",
    "重庆森特文化传媒有限公司",
    "商界传媒集团",
    "重庆星环云科技有限公司",
    "重庆畅所欲言网络科技有限公司",
    "重庆光景来兮文化传媒有限公司",
    "四川茉莉橙子文化传媒有限公司",
    "北京墨芽文化传媒有限公司",
    "北京铭汇优品网络发展有限公司",
    "吉林万方沃土农业发展有限公司",
    "广州奈稻商贸有限公司",
    "阿尼克斯（黑龙江）贸易有限公司"
  ];

  readonly school: string[] = [
    "重庆工程学院",
    "重庆城市科技学院",
    "重庆文化艺术职业学院",
    "长江师范学院",
    "重庆工商大学",
    "重庆邮电大学",
    "重庆三峡学院",
    "重庆科技大学",
    "重庆师范大学",
    "四川外国语大学",
    "重庆交通大学"
  ];

  render() {
    const { pageData } = this.state;
    return (
      <View className='index'>
        <Topbar
          renderLeft={
            <View
              style={{
                display: "flex",
                alignItems: "baseline",
                marginLeft: "10px"
              }}
            >
              <View style={{ fontWeight: "bold", fontSize: "25px" }}>斑鸠</View>
              <View style={{ fontSize: "15px" }}>Turtledove</View>
            </View>
          }
        />

        <NoticeBar
          color='#1989fa'
          background='#ecf9ff'
          leftIcon='info-o'
          mode='closeable'
          text='如果遇到图片加载空白，请重新打开小程序'
        />

        <View className='index-h'>
          <View className='copyright center'>
            {/* <View className="at-article">版权服务</View> */}
            <View>
              <View className='copyright-box'>
                <Canvas
                  style={{ display: "inline-block" }}
                  id='canvas'
                  type='2d'
                  onClick={this.pageCopyright}
                />
                {/* <View className="copyright-t">版权登记</View> */}
                <Canvas
                  style={{ display: "inline-block" }}
                  id='canvas-man'
                  type='2d'
                  onClick={this.pageCopyright_exchange}
                />
              </View>
              <View className='copyright-box'>
                <View
                  style={{
                    textAlign: "center",
                    width: "50%",
                    marginTop: "10px"
                  }}
                >
                  版权登记
                </View>
                <View
                  style={{
                    textAlign: "center",
                    width: "50%",
                    marginTop: "10px"
                  }}
                >
                  成果展示
                </View>
              </View>
            </View>
            <View style={{ marginTop: "3%" }}>
              {/* swiper */}
              {/* <Swiper
                className='swiper-style'
                indicatorColor='#999'
                indicatorActiveColor='#333'
                circular
                autoplay
                indicatorDots
              >
                {this.state.picArray.map((item, i) => {
                  return (
                    <SwiperItem key={i} className='demo-text-1'>
                      <View style={{ height: "25vh" }}>
                        <Image
                          src={item.image}
                          style={{
                            objectFit: "cover",
                            height: "100%",
                            width: "100%",
                            borderRadius: "10px"
                          }}
                          mode='aspectFill'
                        />
                      </View>
                    </SwiperItem>
                  );
                })}
              </Swiper> */}
              <View style={{ width: "100%" }}>
                <Video
                  style={{ width: "100%" }}
                  src='cloud://banjiu-0glooskma15eac2d.6261-banjiu-0glooskma15eac2d-1305931933/版权助力中华优秀传统文化传承发展.mp4'
                  poster=''
                  controls={false}
                  autoplay
                  id='video'
                  //  showPlayBtn={false}
                  enablePlayGesture
                />
              </View>
            </View>
            <View
              style={{
                width: "100%",
                padding: "0 10px",
                display: "flex",
                justifyContent: "space-between"
              }}
            >
              {pageData.countCopyRight && (
                <View className='user-pic'>
                  {/* {pageData.countCopyRight.total} */}
                  {1365}
                </View>
              )}
              {pageData.countUser && (
                // <View className='total-pic'>{pageData.countUser.total}</View>
                <View className='total-pic'>{2150}</View>
              )}
            </View>
          </View>
          <Tabbar />
        </View>
        <View style={{ marginTop: "30px" }}>
          <View
            style={{
              width: "100%",
              textAlign: "center",
              fontSize: "20px",
              fontWeight: "bold"
            }}
          >
            合作单位
          </View>
          <View
            style={{
              width: "100%",
              display: "flex",
              flexWrap: "wrap",
              justifyContent: "center",
              marginBottom: "30px"
            }}
          >
            {this.company.map((item, i) => {
              return (
                <View
                  key={i}
                  style={{
                    width: "30%",
                    height: "30px",
                    margin: "5px"
                  }}
                >
                  {item}
                </View>
              );
            })}
          </View>
        </View>
        <View style={{ marginTop: "30px" }}>
          <View
            style={{
              width: "100%",
              textAlign: "center",
              fontSize: "20px",
              fontWeight: "bold"
            }}
          >
            合作院校
          </View>
          <View
            style={{
              width: "100%",
              display: "flex",
              flexWrap: "wrap",
              justifyContent: "center",
              marginBottom: "30px"
            }}
          >
            {this.school.map((item, i) => {
              return (
                <View
                  key={i}
                  style={{
                    width: "30%",
                    height: "30px",
                    margin: "5px"
                  }}
                >
                  {item}
                </View>
              );
            })}
          </View>
        </View>
      </View>
    );
  }
}
